<template>
  <by-background />

  <by-navigation-bar title="退款申请" />

  <view class="padding-20">
    <view class="page bg-white padding-tb-20 padding-lr-30 margin-bottom-20">
      <input v-model="form.orderNo" class="width-full text-28 color-t1" type="number" maxlength="11" placeholder="请输入订单号" placeholder-class="color-placeholder">
    </view>

    <view class="page bg-white padding-tb-20 padding-lr-30 margin-bottom-20 flex-row">
      <by-radius
        v-for="(item,index) in refundTypes"
        :key="index"
        :model-value="form.refundType === index"
        :label="item"
        :class="{'margin-left-20': index}"
        size="30rpx"
        value-size="26rpx"
        label-size="28rpx"
        @click="form.refundType = index"
      />
    </view>

    <view class="page bg-white padding-tb-20 padding-lr-30">
      <textarea
          :value="form.content"
          placeholder="请输入退款诉求"
          :maxlength="100"
          placeholder-style="color: #c2c2c2"
          class="textarea width-full text-28 color-t1"
          @input="form.content = $event.detail.value"
      />
      <view class="flex-row justify-end margin-top-20">
        <text class="text-26 color-placeholder">{{form.content.length}}/100</text>
      </view>
    </view>

    <view class="padding-lr-10 margin-top-80">
      <by-button height="78rpx" font-size="32rpx" bold text="提 交" @click="submit"/>
    </view>
  </view>
</template>

<script setup lang="ts">
import useUserStore from '@/store/user'
import { reactive } from 'vue'
import { jump, toast } from '@/common/util'
import { addOrderRefund } from '@/common/api'

const refundTypes = ['余额退款', '订单退款']

const form = reactive({
  orderNo: '',
  refundType: 0,
  content: ''
})

async function submit() {
  if (!form.content) {
    toast('请输入退款诉求')
    return
  }
  await addOrderRefund(Object.assign({
    uid: useUserStore().uid
  }, form))
  jump()
  toast('提交成功')
}
</script>

<style scoped lang="scss">
@include setMargin(top, 80);

.page{
  border-radius: 16rpx;

  .textarea{
    height: 300rpx;
  }

}
</style>
